<template>
  <div class="laboratory">
    <div class="right" ref="right" v-if="getTtile($route.name) !== '审核管理'">
      <keep-alive>
        <firmList
          ref="firmList"
          class="formList mr-16"
          :open="retract"
          @open="openAction(!retract)"
        />
      </keep-alive>
    </div>

    <div
      class="content"
      ref="left"
      :class="[getTtile($route.name) !== '审核管理' ? 'left' : 'left1']"
    >
      <div class="header">
        <div class="line"></div>
        <div class="title cr-hui fs-22 familyA">
          {{ getTtile($route.name) }}
        </div>
      </div>
      <div class="left">
        <transition name="fade-left-transform" mode="out-in">
          <router-view :key="key"></router-view>
        </transition>
        <div class="jiao_left"></div>
        <div class="jiao_right"></div>
        <div
          class="open"
          @click="openAction(!retract)"
          v-if="getTtile($route.name) !== '审核管理'"
        >
          <i class="el-icon-caret-right" v-if="retract"></i>
          <i class="el-icon-caret-left" v-else></i>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapGetters, mapActions, mapMutations, mapState } from "vuex";
export default {
  name: "laboratory",
  data() {
    return {
      retract: false,
      title: "",
      laboratoryByCollege: [],
    };
  },
  computed: {
    key() {
      return this.$route.fullPath;
    },
  },
  mounted() {
    this.laboratoryByCollege = JSON.parse(
      localStorage.getItem("laboratoryByCollege")
    );
  },
  methods: {
    ...mapMutations("laboratory", ["setChangeWidth"]),
    getTtile(name) {
      switch (name) {
        case "equipment":
          this.title = "仪器管理";
          return "仪器管理";
        case "consumables":
          this.title = "耗材管理";
          return "耗材管理";
        case "environment":
          this.title = "环境管理";
          return "环境管理";
        case "entrance":
          this.title = "门禁管理";
          return "门禁管理";
        case "energy":
          this.title = "能耗管理";
          return "能耗管理";
        case "video":
          this.title = "视频监控";
          return "视频监控";
        case "examine":
          return "审核管理";
      }
    },
    openAction(status) {
      this.retract = status;
      this.setChangeWidth();
      const right = this.$refs.right;
      const left = this.$refs.left;
      Object.assign(right.style, {
        display: this.retract ? "none" : "block",
        transition: "all 0.2s",
      });
      Object.assign(left.style, {
        width: this.retract ? "100%" : "83%",
        transition: "all 0.2s",
      });
    },
  },
  watch: {
    title(val) {
      this.$refs.firmList.linkTo(this.laboratoryByCollege[0]);
    },
  },
};
</script>

<style lang="scss" scoped>
.laboratory {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
  display: flex;
  // flex-direction: column;
  box-sizing: border-box;
  .content {
    width: 83%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
  }
  .header {
    height: 80px;
    flex-shrink: 0;
    padding: 0px 32px;
    display: flex;
    align-items: center;
    position: relative;
    .line {
      width: 4px;
      height: 24px;
      margin-right: 16px;
      background: #00bfb1;
      border-radius: 2px;
    }
  }

  .left {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    flex: 0.975;
    .open {
      width: 12px;
      height: 64px;
      background: #ffffff;
      border: 1px solid #ffffff;
      border-right: 0;
      border-radius: 2px 0px 0px 2px;
      position: absolute;
      left: 0px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      i {
        font-size: 19px;
        color: #00bfb1;
      }
    }
  }
  .right {
    width: 17%;
    height: 100%;
    margin-left: 1px;
    flex-shrink: 0;
    // position: relative;
    background: #fff;
  }
  .labBox {
    height: 100%;
    margin-left: 32px;
    background: #fff;
    box-shadow: 0px 20px 39px 1px rgba(8, 46, 68, 0.04);
    display: flex;
    flex-direction: column;
  }
  .left1 {
    width: 100%;
    height: 100%;
    position: relative;
  }
}
</style>